<template>
  <div class="znz-content">
    <img
      class="znz"
      @click="changImg"
      :style="styles"
      src="/images/new/znz.png"
    />
    <div class="top" v-if="showImg">
      <img src="/images/new/tag/drbg.png" />
      <p class="text">{{ getText("top") }}</p>
    </div>
    <div class="right" v-if="showImg">
      <img src="/images/new/tag/drbg.png" />
      <p class="text">{{ getText("right") }}</p>
    </div>
    <div class="left" v-if="showImg">
      <img src="/images/new/tag/drbg.png" />
      <p class="text">{{ getText("left") }}</p>
    </div>

    <div class="bottom" v-if="showImg">
      <img src="/images/new/tag/drbg.png" />
      <p class="text">{{ getText("bottom") }}</p>
    </div>
  </div>
</template>
<script setup>
import emitter from "@/utils/mitt";
const props = defineProps({
  oneData: Object,
  diruction: String,
});

let styles = ref({
  transform: `translate(-50%, -50%) rotate(0deg)`, // 添加旋转
});

let showImg = ref(false);
const changImg = () => {
  showImg.value = !showImg.value;
};

let diructionText = ref({
  1: "正东",
  2: "正西",
  3: "正南",
  4: "正北",
  5: "东南",
  6: "东北",
  7: "西南",
  8: "西北",
});

const getText = (type) => {
  let key = props.diruction.split("");
  if (type == "top") {
    return diructionText.value[key[0]];
  }
  if (type == "bottom") {
    return diructionText.value[key[1]];
  }
  if (type == "left") {
    return diructionText.value[key[2]];
  }
  if (type == "right") {
    return diructionText.value[key[3]];
  }
};

watch(
  () => props.oneData,
  (newVal, oldVal) => {
    styles.value = {
      transform: `translate(-50%, -50%) rotate(0deg)`, // 添加旋转
    };
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {
  emitter.on("setInstruction", (data) => {
    switch (data.deviceName) {
      case "ar-znz":
        changImg();
        break;
    }
  });
});
</script>
<style lang="scss" scoped>
.znz-content {
  width: 90px;
  height: 90px;
  background: url("/images/new/zhnbg.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 167px;
  top: 133px;
  z-index: 999;
  .znz {
    width: 35px;
    height: 94px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  .text {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 70px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-weight: 600px;
    font-size: 30px;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .top {
    position: fixed;
    left: 50%;
    top: 222px;
    transform: translateX(-50%);
    z-index: 99;
    width: 110px;
    height: 145px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .left {
    position: fixed;
    left: 800px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    z-index: 99;
    width: 110px;
    height: 145px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    position: fixed;
    right: 800px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    z-index: 99;
    width: 110px;
    height: 145px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .bottom {
    position: fixed;
    left: 50%;
    bottom: 155px;
    transform: translateX(-50%) rotate(180deg);
    z-index: 99;
    width: 110px;
    height: 145px;
    // transform: rotate(180deg);
    .text{
      transform: rotate(180deg);
      bottom: 15px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>